<template>
  <el-dialog
    width="30%"
    title="图片剪裁"
    :visible.sync="innerVisible"
    :close-on-click-modal="false"
    append-to-body>
    <div class="update-photo">
      <el-row :gutter="20">
        <el-col :span="18"><img class="img" :src="img" ref="img"></el-col>
        <el-col :span="6">
          <div>预览</div>
          <div id="preview" ref="preview"></div>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false">取 消</el-button>
      <el-button type="primary">确 认</el-button>
    </div>
  </el-dialog>

</template>

<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import {uploadTtCover} from "@/api/campaign-management/campaign-management";

export default {
  name: "UpdatePhoto",
  props: {
    img: {
      type: [String, Object],
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      cropper: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      const image = this.$refs.img
      const preview = this.$refs.preview
      this.cropper = new Cropper(image, {
        viewMode: 1,
        dragMode: 'crop',
        cropBoxResizable: false,
        movable: false,
        rotatable: false,
        initialAspectRatio: 720 / 1280,
        aspectRatio: 720 / 1280,
        preview:[preview]
      });
    })
  },
  onConfirm () {
    // 基于服务端的裁切使用 getData 方法获取裁切参数
    // console.log(this.cropper.getData())

    // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象
    this.cropper.getCroppedCanvas({width:720,height:1280}).toBlob(blob => {

    })
  },
  uploadTtCover() {

  }
}
</script>

<style scoped>
#preview {
  height: 160px;
  width: 80px;
  overflow: hidden;
}
</style>
